<template>
  <div class="book-list">
    <table class="table table-bordered table-striped table-hover">
      <thead>
        <tr>
          <th v-for="title in titles">
            {{title}}
          </th>
          <th>handle</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="book in books">
          <td v-for="title in titles ">
            {{book[title]}}
          </td>
          <td>
            <button class="btn btn-default" @click="handle_update(book)">修改</button>
            <button class="btn btn-danger" @click="handle_delete(book._id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div id="addNew-model" class="modal" v-show="handle.addNew || handle.updateBook">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" @click=" dataInit();handle.addNew = handle.updateBook = false" >&times;</button>
            <h4 class="modal-title">新增图书信息</h4>
          </div>
          <div class="modal-body">
            <form action="#" method="POST" class="form-horizontal">
              <div class="form-group">
                <label for="name" class="control-label col-md-2">图书名</label>
                <div class="col-md-10">
                  <input type="text" v-model="bookInfo.name" placeholder="请输入图书名" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label for="autor" class="control-label col-md-2">作　者</label>
                <div class="col-md-10">
                  <input type="text" id="autor" v-model="bookInfo.autor" placeholder="请输入作者" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label for="price" class="control-label col-md-2">单　价</label>
                <div class="col-md-10">
                  <input type="text" id="price" v-model="bookInfo.price" placeholder="请输入单价" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label for="publishAt" class="control-label col-md-2">上市时间</label>
                <div class="col-md-10">
                  <input type="date" id="publishAt" v-model="bookInfo.publishAt" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-2 col-md-offset-10">
                  <button class="btn btn-primary btn-block" @click="confirmAdd">确定</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
  #addNew-model {
    display: block;
  }
</style>

<script>
  import formatDate from '../../public/formatDate.js'
  export default {
    data () {
      return {
        titles: ['name', 'autor', 'price', 'publishAt', 'createAt'], 
        books: [],
        bookInfo: {
          name: '',
          autor: '',
          price: '',
          publishAt: '',
          createAt: ''
        }
      }
    },
    mounted() {
      this.dataInit()
    },
    props: ['navtionBooks', 'search', 'handle'],
    computed: {
      books () {
        var search = this.handle.search.replace(/(^|\s+)(\s+|$)/, '')
        if (!search) return this.navtionBooks;
        var books = [];
        this.navtionBooks.map(function (item) {
          if (item.name.search(search) > -1 || item.autor.search(search) > -1 ) {
            books.push(item)
          }
        })
        return books
      }
    },
    methods: {
      dataInit () {
        this.bookInfo = {
          name: '',
          autor: '',
          price: '',
          publishAt: '',
          createAt: ''
        }
        return true;
      },
      confirmAdd (ev) {
        ev.preventDefault()

        var news = this.bookInfo, valid = true;
        news.createAt = formatDate(new Date())
        //确定是否填写所有字段
        for(var key in this.news) {
          if (!news[key]) {
            valid = false
          }
        }
        if (!valid) {
          alert('请填写完整好么')
          return
        }

        //格式化
        news.publishAt = formatDate(new Date(news.publishAt))
        news.price = +news.price
        //向express发送请求
        this.$http.post('http://localhost:8080/' + (this.handle.addNew? 'add' : 'update') , news).then((res) => {
          //重置图书信息
          this.dataInit()
          this.handle.addNew = this.handle.updateBook = false;
          this.$emit('updateData')
        })
        
      },
      handle_update (book) {
        for (var i = 0; i < this.titles.length; i++) {
          var key = this.titles[i]
          this.bookInfo[key] = book[key]
        }
        this.bookInfo._id = book._id
        this.handle.updateBook = true;
      },
      handle_delete (id) {
        this.$http.post('http://localhost:8080/delete', {_id: id}).then((res) => {
          this.$emit('updateData')
        })
      }
    },

  }
</script>